<script setup>

import { onMounted, ref } from 'vue'
import { reqAddWhite, reqChangeWhiteStatus, reqGetWhiteList,reqChangeWhiteDel } from '@/api/white/index.js'
import { showToast } from 'vant'

const whiteList = ref([])
const lastPage = ref(0)
const loading = ref(false)
const page = ref(1)
const total = ref(0)
const refreshing = ref(false)
const showAddDialog = ref(false)
const addId = ref('')

onMounted(() => {
  refreshing.value = true
  getWhiteList()
})

const getWhiteList = async () => {
  loading.value = true
  try {
    const result = await reqGetWhiteList({
      page: page.value
    })
    if (result.code === 200) {
      if (page.value === 1) {
        whiteList.value = result.data.data
      } else {
        whiteList.value.push(...result.data.data)
      }
      page.value++
      total.value = result.data.total
      lastPage.value = result.data.last_page
    }
  } catch (e) {
    console.log(e)
  } finally {
    refreshing.value = false
    loading.value = false
  }
}

const onRefresh = () => {
  refreshing.value = true
  page.value = 1
  lastPage.value = 1
  getWhiteList()
}

const onLoadMore = () => {
  getWhiteList()
}

const changeStatus = async (item) => {
  item.status = item.status === 1 ? 0 : 1
  const result = await reqChangeWhiteStatus(item.id, {
    status: item.status
  })

  if (result.code === 200) {
    showToast({ type: 'success', message: '修改成功' })
  } else {
    item.status = item.status === 1 ? 0 : 1
    showToast({ type: 'fail', message: '修改失败' })
  }
}
const changeDel = async (item) => {
    console.log("删除")
    const result = await reqChangeWhiteDel(item.id)

    if (result.code === 200) {
        showToast({ type: 'success', message: result.msg })
        onRefresh()
    } else {
        showToast({ type: 'fail', message: result.msg })
    }
}
const addWhite = () => {
  showAddDialog.value = true
}

const handleAdd = async () => {
  const result = await reqAddWhite({ user_id: addId.value })
  if (result.code === 200) {
    showToast({ type: 'success', message: '添加成功' })
    onRefresh()
  } else {
    showToast({ type: 'fail', message: result.msg })
  }
}
</script>

<template>
  <div class="white-container">
    <van-button type="primary" @click="addWhite">添加白</van-button>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="page > lastPage"
        finished-text="没有更多了"
        @load="onLoadMore"
      >
        <div class="white-item" v-for="item in whiteList" :key="item.id">
          {{ item.user_id }} {{ item.created_at }}
          <van-switch @change="changeStatus(item)" :model-value="item.status === 1" />
          <el-button type="danger" @click="changeDel(item)">删除</el-button>
        </div>
      </van-list>
      <van-back-top bottom="10vh" />
    </van-pull-refresh>
    <van-dialog v-model:show="showAddDialog" ti tle="添加白名单" show-cancel-button @cancel="showAddDialog = false"
                @confirm="handleAdd">
      <van-field v-model="addId" placeholder="请输入用户id" type="number" />
    </van-dialog>
  </div>
</template>

<style scoped lang="less">
.white-container {
  .white-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
}
</style>